<!DOCTYPE HTML>
<html>
	<head>
		<title>Ajax Upload and Resize an Image with PHP.</title>
		<meta content=' How to do Ajax Image Upload without Refreshing Page using Jquery.. Tutorial focused on Programming, Jquery, Ajax, PHP, Demos, Web Design, Javascript, Software and MySQL' name='description'/>
		<meta content='java script, web development, web design, web programming, jquery ajax, ajax php, jquery ajax demos, jquery demos, regular expression, ajax demos, ajax programming, tutorials, php script, ajax tutorial, ajax examples, jquery tutorial, database, mysql, web database development, blogger, google ajax api, google visualization, google app, rss, technology, coding, code, examples, php programming, facebook scripts, twitter API, facebook like, twitter scripts, form validation, hosting, form submit, validation, application development, software, free scripts, free hosting, sql script, programming, jsp, tomcat, SMTP Mail, java Restful, Oauth, 9lessons.info , 9lessons, 9lessons Programming Blog' name='keywords'/>
		<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
		<meta content='website' name='generator'/>

		
		<link href="<?php echo base_url() . F_CSS; ?>bootstrap.css" rel="stylesheet" type="text/css" />
		<link href="<?php echo base_url() . F_CSS; ?>style.css" rel="stylesheet" type="text/css" media="all" />
		<link href="<?php echo base_url() . F_CSS; ?>form.css" rel="stylesheet" type="text/css" media="all" />
		<!--<link href="<?php echo base_url() . F_CSS; ?>list_grid.css" rel="stylesheet" type="text/css" media="all" />-->

		<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
		<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>jquery1.min.js"></script>
		<!-- start menu -->
		<link href="<?php echo base_url() . F_CSS; ?>megamenu.css" rel="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>megamenu.js"></script>
		<script>
			$(document).ready(function() {
				$(".megamenu").megamenu();
			});
		</script>
		<!--start slider -->
		<link rel="stylesheet" href="<?php echo base_url() . F_CSS; ?>fwslider.css" media="all">
		<script src="<?php echo base_url() . F_JS; ?>jquery-ui.min.js"></script>
		<script src="<?php echo base_url() . F_JS; ?>css3-mediaqueries.js"></script>
		<script src="<?php echo base_url() . F_JS; ?>fwslider.js"></script>
		<!--end slider -->
		<script src="<?php echo base_url() . F_JS; ?>jquery.easydropdown.js"></script>
		<script src="<?php echo base_url() . F_JS; ?>bootstrap-typeahead.js"></script>
		<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>jquery.total-storage.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>move-top.js"></script>
			
	<!--<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>jquery.jscrollpane.min.js"></script>
			<script type="text/javascript" id="sourcecode">
				$(function()
				{
					$('.scroll-pane').jScrollPane();
				});
			</script>-->
	<!-- start details -->
	<!--<script src="<?php echo base_url() . F_JS; ?>slides.min.jquery.js"></script>
	   <script>
			$(function(){
				$('#products').slides({
					preload: true,
					preloadImage: 'img/loading.gif',
					effect: 'slide, fade',
					crossfade: true,
					slideSpeed: 350,
					fadeSpeed: 500,
					generateNextPrev: true,
					generatePagination: false
				});
			});
		</script>-->
		<!-- start zoom -->
		<!--<link rel="stylesheet" href="<?php echo base_url() . F_CSS; ?>zoome-min.css" />
		<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>zoome-e.js"></script>
		<script type="text/javascript">
			$(function(){
			$('#img1,#img2,#img3,#img4').zoome({showZoomState:true,magnifierSize:[250,250]});
		});
		</script>-->

		<style>
			#panel, #flip {
				padding: 5px;
				text-align: center;
				background-color: #FFF;
				border: solid 1px #c3c3c3;
				
			}
			#panel, #flip a{
				
				text-decoration: none !important;
			}
			#panel {
				padding: 50px;
				display: none;
			}
			

		#toTop {
		    background: url("<?php echo base_url().F_IMG;?>arrow_up.png") no-repeat scroll right top rgba(0, 0, 0, 0);
		    border: medium none;
		    bottom: 10px;
		    display: none;
		    height: 48px;
		    overflow: hidden;
		    position: fixed;
		    right: 10px;
		    text-decoration: none;
		    text-indent: 100%;
		    width: 48px;
		}
		

		#toTopHover {
		    display: block;
		    float: right;
		    height: 48px;
		    opacity: 0;
		    overflow: hidden;
		    width: 48px;
		}
		
			/*HOLD THE RATING AND THE BASE TOGETHER*/
			.r {
			position: relative; } /*MUST BE ABSOLUTE TO STACKED*/
			.rating, .transparent { position: absolute; } .rating { z-index: 1; } .star { background: url("<?php echo base_url().F_IMG;?>star.png"); cursor: pointer; float: left !important; /*KEEPS THE STAR NEXT TO EACH OTHER*/ height: 20px; width: 20px; } .transparent .star { opacity: .25; /*BASE STARS ARE TRANSPARENT UNTIL MOUSEOVER*/ } .rating .star { opacity: 1.0; /*CURRENT RATING IS VISIBLE UNTIL MOUSEOVER*/ } .votes { float: left; /*KEEPS THE NUMBER OF VOTES NEXT TO THE RATING & BASE*/ }

			
			.error {
				color: red !important;
			}
			.star_require {
				color: red !important;
			}
		
		</style>
	</head>
	<body>
		<?php $this -> load -> view(F_MASTER . "header_top"); ?>

		<?php $this -> load -> view(F_MASTER . "header_buttom"); ?>
		<!-- start slider -->
		<?php
		if ($this -> uri -> segment(1) == "") {
			$this -> load -> view(F_MASTER . "slider");
		}
		?>

		<!--/slider -->

		<!--notification-->
		<?php $this -> load -> view(F_MASTER . "notification"); ?>
		<?php

		if (isset($error_404) && $error_404 != "") {

			echo "<div class='login'><h1>$error_404</h1></div>";
		} else {

			if ($this -> uri -> segment(1) == "") {
				$this -> load -> view(F_MASTER . "main");
			} else {
				$this -> load -> view(F_TEMPLATE . str_replace('-', '_', $this -> uri -> segment(1)) . '/' . (($this -> uri -> segment(2) == '') ? 'index' : str_replace('-', '_', $this -> uri -> segment(2))));
			}
		}
		?>

		<div class="footer">
			<?php $this -> load -> view(F_MASTER . "footer_top"); ?>
			<?php $this -> load -> view(F_MASTER . "footer_middle"); ?>
			<?php $this -> load -> view(F_MASTER . "footer_buttom"); ?>
		</div>

		<script>
			function goBack() {
				window.history.back()
			}
		</script>
		<script>
			$(document).on('click', '.btn-add', function(event) {
				event.preventDefault();

				var field = $(this).closest('.form-group');
				var field_new = field.clone();

				$(this).toggleClass('btn-default').toggleClass('btn-add').toggleClass('btn-danger').toggleClass('btn-remove').html('–');

				field_new.find('input').val('');
				field_new.insertAfter(field);
			});

			$(document).on('click', '.btn-remove', function(event) {
				event.preventDefault();
				$(this).closest('.form-group').remove();
			});
		</script>
		
		
		<!--<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>jquery.jscrollpane.min.js"></script>
			<script type="text/javascript" id="sourcecode">
				$(function()
				{
					$('.scroll-pane').jScrollPane();
				});
			</script>-->
	<!-- start details -->
	<script src="<?php echo base_url() . F_JS; ?>slides.min.jquery.js"></script>
	   <script>
			$(function(){
				$('#products').slides({
					preload: true,
					preloadImage: 'img/loading.gif',
					effect: 'slide, fade',
					crossfade: true,
					slideSpeed: 350,
					fadeSpeed: 500,
					generateNextPrev: true,
					generatePagination: false
				});
			});
		</script>
		<!-- start zoom -->
		<link rel="stylesheet" href="<?php echo base_url() . F_CSS; ?>zoome-min.css" />
		<script type="text/javascript" src="<?php echo base_url() . F_JS; ?>zoome-e.js"></script>
		<script type="text/javascript">
			$(function(){
			$('#img1,#img2,#img3,#img4').zoome({showZoomState:true,magnifierSize:[250,250]});
		});
		</script>
		
		<script type="text/javascript">
		$(document).ready(function() {			
			$().UItoTop({ easingType: 'easeOutQuart' });
			
		});
	</script>
	
    <a href="#" id="toTop"><span id="toTopHover"> </span></a>
	</body>
</html>